<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <style>
        #buttom-container {
            position: absolute;
            top: 4px;
            left: 45px;
            z-index: 99;
        }
        .button {
            padding: 0 10px;
            min-width: 54px;
            height: 30px;
            line-height: 30px;
            margin: 4px;
            text-align: center;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            background: rgba(34, 45, 50, 0.7);
            color: #FFFFFF;
        }
        .button:hover {
            background: rgb(34, 45, 50);
        }
        .mark {
            width: 100px;
            height: 100px;
            border: 4px solid red;
        }
    </style>
</head>
<body>
    <div id="buttom-container">
        <button class="button" onclick="customTag()">自定义标签</button>
        <button class="button" onclick="deleteTag()">删除自定义标签</button>
        <button class="button" id="tagBtn" onclick="setVisibility()">关闭标签</button>
    </div>
    <div id="left" style="width:100%;height:100%;position:relative;float:left"></div>
    <script id="viewerStartup">
        let model, markId;
        window.onload = function () {
            var proleft = new CarsView("left", 'csr', exampleModelId, callbackleft, {
            });
            proleft.then(function (value) {
                model = value;
            });
        }
        function callbackleft(nodeNames, nodeIds, position, center, normal) {

        }
        function customTag() {
            if (markId) return
            const tag = document.createElement('img');
            tag.src = '../img/arrow.png'
            let attributes = { id: Math.floor((Math.random() * 100) + 1) };
            const pos = {
                x: 1436.8218271881342,
                y: -1561.4213776667602,
                z: 7775.049363318365
            }
            markId = model.addDivMarkupWithPositionAndColor(tag, 0, 0, 255, pos.x, pos.y, pos.z, pos, attributes);
            console.log(markId);
        }
        function deleteTag() {
            model.removeDivMarkupWithID(markId);
            markId = ""
        }
        function setVisibility () {
            const tagBtn = document.getElementById("tagBtn");
            if (tagBtn.innerText === "显示标签") {
                let res = model.setDivMarkerVisibility([markId], true);
                tagBtn.innerText ="关闭标签"
            } else {
                model.setDivMarkerVisibility([markId], false);
                tagBtn.innerText ="显示标签"
            }
        }
    </script>
</body>
</html>
